<template>
  <div>
    <el-container class="background">
      <div class="d1">
        <span class="s1 animated bounceInDown">为公益而生</span><br />
      </div>
      <el-main class="main">
        <div id="item1">
          <p class="p1" @click="toRouter('/charity/charityMall')">捐赠义卖 ></p>
          <el-row>
            <el-col :span="12" class="col-img1">
              <img
                src="../../../assets/image/charity/swiper/farmers-4.jpeg"
                alt=""
              />
            </el-col>
            <el-col :span="12">
              <p style="font-size: 4em; margin-left: 5vw">DONATION SALE</p>
              <div
                style="
                  width: 25vw;
                  margin-left: 10vw;
                  font-size: 1.5em;
                  margin-top: 5vh;
                  line-height: 5vh;
                "
              >
                <p>
                  本商城由专业团队良心打造，生活好物，山区特产，古玩收藏应有尽有，商品均为义卖，
                  您的点滴付出将为希望工程添砖加瓦！
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <div class="d2"><span class="s1">关注留守儿童</span><br /></div>
      <el-main class="main">
        <div id="item2">
          <p class="p1" @click="toRouter('/charity/persondonation')">
            公益捐赠 >
          </p>
          <el-row>
            <el-col :span="12">
              <p style="font-size: 4em; margin-left: 10vw">PUBLIC DONATION</p>
              <div
                style="
                  width: 25vw;
                  margin-left: 10vw;
                  font-size: 1.5em;
                  margin-top: 5vh;
                  line-height: 5vh;
                "
              >
                <p>
                  本频道用于发起捐赠，仅针对学生，不论你处于什么学段，只要你有困难，
                  我们永远为你提供帮助，在这里发起捐赠，学路无忧！
                </p>
              </div>
            </el-col>
            <el-col :span="12" class="col-img2">
              <div>
                <ul>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-1-1.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-1-2.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-1-3.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-2-1.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-2-2.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-2-3.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-3-1.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-3-2.jpg"
                      alt=""
                    />
                  </li>
                  <li>
                    <img
                      src="../../../assets/image/charity/swiper/child-3-3.jpg"
                      alt=""
                    />
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer style="height: 0"></el-footer>
    </el-container>
  </div>
</template>

<script>
//import $ from "jquery";
export default {
  name: "charityIndex",
  data() {
    return {};
  },
  components: {},
  methods: {
    //页面渲染完成加载方法，确保屏幕中的图片的高度第一次渲染到页面
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
        console.log(this.$refs.bannerHeight[0].height);
      });
    },
    toRouter(path) {
      this.$router.push(path);
    }
  },
  mounted() {
    this.imgLoad();
    //添加事件监听，当视口发生变化的时候得到此时的图片的高度赋值给bannerHeight
    window.addEventListener(
      "resize",
      () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
        this.imgLoad();
      },
      false
    );
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.d1 {
  width: 100%;
  height: 600px;
  background-image: url(../../../assets/image/charity/swiper/farmers-3.jpeg);
  background-size: cover;
  background-attachment: fixed;
}
.d2 {
  width: 100%;
  height: 600px;
  background-image: url(../../../assets/image/charity/swiper/child-4.jpg);
  background-size: cover;
  background-attachment: fixed;
}
.s1 {
  display: inline-block;
  font-size: 80px;
  color: white;
  margin-left: 480px;
  margin-top: 200px;
}

.main {
  // background-color: rgb(240, 183, 136);
}
.col-img1 > img {
  width: 40vw;
  height: 30vw;
  margin-left: 10vw;
  margin-bottom: 10vw;
}
// .col-img1 > :hover {
//   animation-name: bigger;
//   animation-duration: 1s;
// }
// @keyframes bigger {
//   0% {
//   }
//   50% {
//     transform: scale(0.8);
//   }
//   100% {
//     transform: scale(1);
//   }
// }
.col-img2 > img {
  width: 30vw;
  height: 30vw;
  margin-left: 5vw;
}

// 头部轮播
.el-carousel__item {
  color: #475669;
  font-size: 14px;
  // opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.p1:hover {
  cursor: pointer;
  transform: scale(1.1);
}
ul {
  list-style: none;
  width: 610px;
  height: 390px;
  margin-bottom: 30px;
}

li {
  float: left;
  width: 200px;
  height: 130px;
  // border: 1px lightblue solid;
  box-sizing: border-box;
  overflow: hidden;
}
li > :hover {
  animation-name: change;
  animation-duration: 1s;
}
@keyframes change {
  0% {
  }
  100% {
    transform: scale(1.2);
  }
}

.p1 {
  transition: all 0.5s ease-out 0.1s;
  width: 300px;
  font-size: 3em;
  margin-left: 40vw;
  margin-bottom: 8vh;
  margin-top: 8vh;
  text-align: center;
  border-radius: 1.5rem;
  // background: linear-gradient(to bottom, #a7ddcb 20%, #f3be94 70%);
  background: linear-gradient(to bottom, #ffeeee, #ddefbb);
  // background: linear-gradient(to bottom, #a1ffce, #faffd1);
}
</style>
